<template>
  <span @dblclick="handleEdit" v-show="!isEdit"> {{ props.cellValue }}</span>
  <input
    v-show="isEdit"
    v-model="caseValue"
    @keyup.enter="handleChangeCase"
    @blur="handleChangeCase"
  />
</template>

<script setup>
import { inject, ref } from "vue";
let isEdit = ref(false);
const props = defineProps(["cellValue", "caseId", "caseKey"]);
const caseValue = ref(props.cellValue);

//接收注入依赖
const changeCase = inject("changeCase");

//第二个参数，如果没有从先辈组件地方得到对应的provide，那么就用第二个参数作为默认值。
const roy = inject("roy", "肉一");

function handleChangeCase() {
  console.log("没有传的roy值是", roy);
  console.log(props.caseId);
  console.log(
    `要修改的用例id是${props.caseId}，要修改的键是${props.caseKey}值是${caseValue.value}`
  );
  finishEdit();
  changeCase(props.caseId, props.caseKey, caseValue.value);
}

//打开编辑
function handleEdit() {
  isEdit.value = true;
}
//结束编辑
function finishEdit() {
  isEdit.value = false;
}
</script>

<style scoped></style>
